<template>
	<view>
		<view class="map-wrap" style="position: relative;">
			<!-- #ifdef APP-PLUS || H5 -->
			<view id="map-box"></view>
			<!-- #endif -->
			<nav id="listing-group" class="listing-group">
				<label for="scrollZoom" class="green" @click="getRTP()">
					<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="22" color="#eee">
					</uni-icons>
					<view>定位</view>

				</label>
				<label for="boxZoom" class="green" @click="initMap(1)">
					<uni-icons custom-prefix="iconfont" type="icon-qiye" size="22" color="#eee">
					</uni-icons>
					<view>企业</view>
				</label>

				<label for="dragRotate" class="green" @click="initMap(2)">
					<uni-icons custom-prefix="iconfont" type="icon-zerenqu" size="22" color="#eee">
					</uni-icons>
					<view>责任区</view>
				</label>

				<label for="dragPan" class="green" @click="initMap(3)">
					<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
					</uni-icons>
					<view>巡查点</view>
				</label>
				<label for="search" class="green" @click="open">
					<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
					</uni-icons>
					<view>搜索</view>
				</label>
			</nav>
			<!---->
			<!-- <nav class="listing-groups">
			<label for="scrollZoom" class="green" style="width: 61px;">
				<view style="padding-top: 25px;">全部</view>
			</label>
			<label for="boxZoom" style="width: 61px;" class="green">
				<view>近3个月</view>
			</label>
			<label for="dragRotate" style="width: 61px;" class="green">
				<view>近一年</view>
			</label>
			<label for="dragPan" style="width: 61px;" class="green">
				<view>近三年</view>
			</label>
		</nav> -->

			<!---->
			<nav class="listing-groupss">
				<label for="scrollZoom" class="green" style="width: 61px;">
					<view style="padding: 15px;">当前所选凤县全部企业事故总数为<span style="color: red;">3</span>起，今年事故总数为
						<span style="color: red;">2</span>起
					</view>
				</label>

			</nav>

			<u-popup :show="show" @close="close">
				<view>
					<text>
						<u-search shape="square" style="padding: 15px;"></u-search>
						<!-- 导航栏 -->
						<view class="cu-list grid solids-bottom col-4 no-border">
							<view class="cu-item" @click="initMap(4)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									</uni-icons>
								</view>
								<text class="txtfont">隐患分布</text>
							</view>

							<view class="cu-item" @click="initMap(5)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									</uni-icons>
								</view>
								<text class="txtfont">事故分布</text>
							</view>

							<view class="cu-item" @click="initMap(6)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									</uni-icons>
								</view>
								<text class="txtfont">监控设备</text>
							</view>

							<view class="cu-item" @click="initMap(7)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									</uni-icons>
								</view>
								<text class="txtfont">监测设备</text>
							</view>
						</view>
					</text>
				</view>
			</u-popup>

			<!--矿山详情弹出框-->
			<u-popup :show="show2" @open="open2"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close2">
				<view class="ksorder">
					<view @click="close2" class="close">×</view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div style="margin-top:5px"><span
									style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">{{minePointdetails.name}}</span>
							</div>
							<div
								style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;display: inline-block;width: 100px;text-align: center;padding:5px 0;margin-right: 10px;">
								<span v-if='minePointdetails.status == 1'>生产</span>
								<span v-if='minePointdetails.status == 2'>停产</span>
							</div>
							<div
								style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;display: inline-block;width: 100px;text-align: center; padding:5px 0;">
								<span v-if='minePointdetails.riskLevel == 1'>低风险</span>
								<span v-if='minePointdetails.riskLevel == 2'>一般风险</span>
								<span v-if='minePointdetails.riskLevel == 3'>较大风险</span>
								<span v-if='minePointdetails.riskLevel == 4'>重大风险</span>
							</div>
							<div style="margin-top:5px"><span
									style="color: #595959;">地址：</span><span>{{minePointdetails.address}}</span></div>
							<div style="margin-top:5px"><span
									style="color: #595959;">负责人：</span><span>{{minePointdetails.directorName}}</span>
							</div>
							<div style="margin-top:5px"><span
									style="color: #595959;">联系方式：</span><span>{{minePointdetails.directorPhone}}</span>
							</div>
						</div>
					</div>
				</view>
			</u-popup>

			<!--事故详情页弹出框-->
			<u-popup :show="show1" @open="open1"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close1">
				<view class="order cu-from-group-wei">
					<view @click="close1" class="close">×</view>
					<view style="height: 370px; background-color: rgb(255 255 255);">
						<!--告警表单-->
						<view class="styone">
							<view>事故统计</view>
							<view style="font-size: 14px;">{{ this.getLocalTime(accidentsdetails.accidentTime) }}</view>
							<view>事故等级:{{accidentsdetails.type}}</view>
							<view>矿山企业:{{accidentsdetails.enterpriseInfoName}}</view>
							<!-- <view>
								<image src="/static/YCL2.0.png" class="u-image-error">
							</view> -->
							<!-- <image v-if="zt" src="@/static/ycl.png" class="imgWH">
						</image> -->
						</view>

						<!-- <view class="cu-form-group">
							<view class="title fontsize-P">事故类别</view>
							<input placeholder="一般" name="input" disabled="disabled" placeholder-class="cl"></input>
						</view> -->

						<!-- <view class="cu-form-group">
							<view class="title fontsize-P">死亡人数</view>
							<input placeholder="李志伟" name="input" disabled="disabled" placeholder-class="cl"></input>
						</view> -->
						<view class="cu-form-group">
							<view class="title fontsize-P">
								事故原因</view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								:placeholder="accidentsdetails.name"></input>
						</view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								事故地址</view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								:placeholder="accidentsdetails.address"></input>
						</view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								事故描述</view>
							<textarea disabled="disabled" placeholder-class="cl" :placeholder="accidentsdetails.remark"
								style="margin: 0 0 0 0;font-size: 15px;padding-top: 26px;"></textarea>
						</view>

						<!-- <view class="cu-form-group">
							<view class="title fontsize-P">
								事故附件</view>
							<a 
								:href="accidentsdetails.filePath"></a>
						</view> -->
						<!-- <view class="cu-form-group">
							<view class="title fontsize-P">事故描述</view>
							<input placeholder="注备注备注备注事故描述.事故描述.事故描述,事故描述.事故描述" name="input" disabled="disabled"
								placeholder-class="cl"></input>
						</view> -->
						<!-- <view class="cu-form-group">
							<image src="/static/logoAPP.png" style="height: 85px; width: 85px; float: right;">
								<image src="/static/logoAPP.png" style="height: 85px; width: 85px; float: right;">
									<image src="/static/logoAPP.png" style="height: 85px; width: 85px; float: right;">
						</view> -->
						<!-- <view>
							<u-button text="查看详情" type="primary"
								color="linear-gradient(90deg, #1E579A 0%, #2A6AB6 100%)"
								style="width: 650rpx; margin: 20PX auto;" shape="circle" @click="goaccidentsdetails(accidentsdetails.id)">
							</u-button>
						</view> -->
					</view>
				</view>
			</u-popup>

			<!--隐患详情页弹出框-->
			<u-popup :show="show3" @open="open3"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close3">
				<view class="order cu-from-group-wei">
					<view @click="close3" class="close">×</view>
					<view style="height: 580px; background-color: rgb(255 255 255);">
						<!--告警表单-->
						<view class="yhyone">
							<view>隐患事件</view>
							<view style="font-size: 14px;">
								{{ this.getLocalTime(hiddenPointPositiondetails.dangerCreateTime) }}
							</view>
							<view>隐患等级:{{hiddenPointPositiondetails.dangerLevelText}}</view>
							<view>矿山企业:{{hiddenPointPositiondetails.mineInfoName}}</view>
							<view>
								<image v-if="hiddenPointPositiondetails.dangerStatus==0" src="/static/map/map_dcl.png"
									class="u-image-error">
									<image v-if="hiddenPointPositiondetails.dangerStatus==1"
										src="/static/map/map_yxf.png" class="u-image-error">
										<image v-if="hiddenPointPositiondetails.dangerStatus==2"
											src="/static/map/map_dsh.png" class="u-image-error">
											<image v-if="hiddenPointPositiondetails.dangerStatus==3"
												src="/static/map/map_ycl.png" class="u-image-error">
												<image v-if="hiddenPointPositiondetails.dangerStatus==4"
													src="/static/map/map_wjj.png" class="u-image-error">
													<image v-if="hiddenPointPositiondetails.dangerStatus==5"
														src="/static/map/map_yqx.png" class="u-image-error">
							</view>
							<!-- <image v-if="zt" src="@/static/ycl.png" class="imgWH">
						</image> -->
						</view>

						<view class="cu-form-group">
							<view class="title fontsize-P">上报人员</view>
							<input :placeholder="hiddenPointPositiondetails.report" name="input" disabled="disabled"
								placeholder-class="cl"></input>
						</view>

						<view class="cu-form-group">
							<view class="title fontsize-P">隐患类型</view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								:placeholder="hiddenPointPositiondetails.dangerTypeText">
						</view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								隐患来源</view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==1" placeholder="矿区及周边环境条件">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==2" placeholder="矿区平面布局">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==3" placeholder="建筑物">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==4" placeholder="生产工艺场所">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==5" placeholder="生产设备装置">
							<!-- <input name="input" disabled="disabled" placeholder-class="cl"  :placeholder="hiddenPointPositiondetails.dangerCause"> -->
						</view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								隐患原因</view>
							<textarea disabled="disabled" placeholder-class="cl"
								:placeholder="hiddenPointPositiondetails.dangerCause"
								style="margin: 0 0 0 0;font-size: 15px;padding-top: 26px;"></textarea>
						</view>

						<!-- <view class="cu-form-group">
							<view class="title fontsize-P">
								事故附件</view>
							<a 
								:href="accidentsdetails.filePath"></a>
						</view> -->
						<!-- <view class="cu-form-group">
							<view class="title fontsize-P">事故描述</view>
							<input placeholder="注备注备注备注事故描述.事故描述.事故描述,事故描述.事故描述" name="input" disabled="disabled"
								placeholder-class="cl"></input>
						</view> -->
						<view class="cu-form-group" v-for="(item, index) in hiddenPointPositiondetails.imgPathList"
							:key="index">
							<image src="appConfig.baseUrl+item" style="height: 85px; width: 85px; float: right;">
						</view>
						<view>
							<u-button text="查看详情" type="primary" color="linear-gradient(to right, #D36554, #E37757)"
								style="width: 650rpx; margin: 20PX auto;" shape="circle"
								@click="gajin(hiddenPointPositiondetails.id)">
							</u-button>
						</view>
					</view>
				</view>
			</u-popup>


			<!--监测设备详情弹出框-->
			<u-popup :show="show4" @open="open4"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close4">
				<view class="ksorder">
					<view @click="close4" class="close">×</view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div>
								<span>
									<image src="/static/jksbtb.png"
										style="width: 32px;height: 32px;vertical-align: middle; "></image>
								</span>
								<p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
							  display: inline-block; margin-left: 10px;">{{watchdetails.deviceName}}</p>
							</div>
							<div
								style="font-size: 14px; color: #333; background-color: #e1eefd; padding: 10px; border-radius: 21px;overflow: hidden;">
								<button v-for="(item, index) in watchdetails.data"
									style="margin:5px 5px 5px 0;background:  #E1EEFD; color:#225EA4; border: none!important; border-right: 1px solid #5383bb;float: left;line-height: 35px;">{{item.label}}:<span
										style="font-weight: 900; font-style: italic;">{{item.field}}{{item.unit}}</span></button>
							</div>
						</div>
					</div>
				</view>
			</u-popup>

			<!--监控设备详情弹出框-->
			<u-popup :show="show5" @open="open5"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close5">
				<view class="ksorder">
					<view @click="close5" class="close">×</view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div>
								<span>
									<image src="/static/jksbtb.png"
										style="width: 32px;height: 32px;vertical-align: middle; "></image>
								</span>
								<p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
							  display: inline-block; margin-left: 10px;">{{monitoringDetails.deviceName}}</p>
							</div>
							<div style="width: 95%;margin: 5px auto;">
								<video style="width: 100%;margin: 5px auto;"
									src="https://www.runoob.com/try/demo_source/movie.mp4"></video>
							</div>
						</div>
					</div>
				</view>
			</u-popup>

			<!--巡查点详情弹出框-->
			<u-popup :show="show6" @open="open6"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close6">
				<view class="ksorder">
					<view @click="close6" class="close">×</view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div>
								<span style="font-size: 15px;">{{inspectionPointDetails.patrolPointName}}</span>
								<p
									style="margin-left:10px;background-color: rgb(225, 238, 253); color: rgb(34, 94, 164); border: none; border-radius: 50px; line-height: 15px; display: inline-block; width: 100px; text-align: center; padding: 5px 0px; margin-right: 10px;">
									{{inspectionPointDetails.statusText}}
								</p>
							</div>
							<div style="font-size: 15px; margin-top: 10px;">
								巡检矿区：{{inspectionPointDetails.zoneName}}
							</div>
						</div>
					</div>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script module="mapboxde">
	import {
		accidentsList,
		minePoint,
		hiddenPointPosition,
		monitoringEquipment,
		watchsEquipment,
		areaResponsibility,
		minePointdetails,
		accidentDetails,
		hiddendetails,
		monitoringDetails,
		watchsDetails,
		inspectionPointDetails,
		inspectionPoint,
	} from "@/api/mapbox/accidents.js";
	export default {

		data() {
			return {
				show: false,
				show1: false, // 地图弹出框， 在安卓端必须写在script 而非 script module="mapbox" lang="renderjs"里面
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				keyword: '遥看瀑布挂前川', //搜索框
				mineInfoId: '', //事故点位列表请求参数
				accListmarker: [], // 事故点位数据
				accidentId: 1, // 事故分布id，
				accidentTime: "", // 事故分布时间
				minepoint: [],
				minePointdetails: {},
				accidentsdetails: {},
				hiddenPointPositiondetails: {},
				watchdetails: {},
				monitoringDetails: {},
				inspectionPointDetails: {},
			}
		},
		mounted() {
			this.iocnOne()
			this.initMap(1)
		},

		methods: {
			open() {
				// console.log('open');
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open1() {
				// console.log('open');
				this.show1 = true
			},
			close1() {
				this.show1 = false
				// console.log('close');
			},
			open2() {
				// console.log('open');
				this.show2 = true
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
			open3() {
				// console.log('open');
				this.show3 = true
			},
			close3() {
				this.show3 = false
				// console.log('close');
			},
			open4() {
				// console.log('open');
				this.show4 = true
			},
			close4() {
				this.show4 = false
				// console.log('close');
			},
			open5() {
				// console.log('open');
				this.show5 = true
			},
			close5() {
				this.show5 = false
				// console.log('close');
			},
			open6() {
				// console.log('open');
				this.show6 = true
			},
			close6() {
				this.show6 = false
				// console.log('close');
			},
			iocnOne() {
				this.show = true
			},
			iocnTWO() {
				this.show1 = true
			},
			/* 事故跳转详情 */
			// goaccidentsdetails(){
			// 	this.warnId = item;
			// 	this.$tab.navigateTo(
			// 	  `/pages/work/dangereventetails/index?id=${this.warnId}`
			// 	);
			// },
			/* 隐患跳转详情 */
			gajin(item) {
				this.warnId = item;
				this.$tab.navigateTo(
					`/pages/work/dangereventetails/index?id=${this.warnId}`
				);
			},
			getLocalTime(nS) {
				// 日期转换
				var date = new Date(nS); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + "年";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "月";
				var D =
					(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日 ";
				var h = date.getHours() + ":";
				var m = date.getMinutes() + ":";
				var s = date.getSeconds();
				// console.log(s);
				return Y + M + D + h + m + s
			},
			getMapClick(item) {
				item
				console.log(item)
			},
			// 获取事故点位列表
			getAccidentsList() {
				accidentsList(this.mineInfoId).then(res => {
						console.log("获取事故点位列表", res);
						// this.accListmarker = res.data，
						console.log("@@@@8", res.data)
						res.data.list.forEach(item => {
							const el7 = document.createElement('div');
							// el5.style.backgroundColor = '#000'
							el7.style.backgroundImage = "url('/static/spsg.png')"
							//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
							el7.style.width = 40 + "px"
							el7.style.height = 40 + "px"
							el7.id = 'marker';
							this.marke7 = new mapboxgl.Marker(el7)
								.setLngLat([item.longitude, item.latitude])
								// sets a popup on this marker
								.addTo(this.map);
							// 事故事件
							this.marke7.getElement().addEventListener('click', (e) => {
								accidentDetails(item.id).then(res => {
									console.log(res)
									this.show1 = true
									this.accidentsdetails = res.data

								})
							});

						})

					})
					.catch((err) => {
						console.log(err);
					});
			},


			// 监测设备点位列表
			getWatchEquipment() {
				watchsEquipment().then(res => {
					console.log("监测设备", res)
					res.data.forEach((item) => {
						console.log(item)
						const el6 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el6.style.backgroundImage = "url('/static/spjc.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el6.style.width = 40 + "px"
						el6.style.height = 30 + "px"
						el6.id = 'marker';
						// create the marker
						this.marke6 = new mapboxgl.Marker(el6)
							.setLngLat([item.longitude, item.latitude])
							// .setPopup(popup7) // sets a popup on this marker
							.addTo(this.map);
						//监测设备
						this.marke6.getElement().addEventListener('click', (e) => {
							watchsDetails(item.id).then(res => {
								console.log(res)
								this.show4 = true
								this.watchdetails = res.data
								console.log(this.watchdetails)

							})
						});


					})

				})
			},





			// 矿山点位列表
			getMinePoint() {
				minePoint().then((res) => {
					this.minepoint = res.data
					const newArreyData = res.data
					newArreyData.forEach((item) => {
						// 创建 矿山企业
						this.marke2 = new mapboxgl.Marker({
								color: '#EF9E6A',
								top: '500',
								// color it red
							}).setLngLat([item.longitude, item.latitude]).setPopup(this.popup2)
							.addTo(this.map);
						this.marke2.getElement().addEventListener('click', (e) => {
							minePointdetails(item.id).then(res => {
								this.show2 = true
								this.minePointdetails = res.data
								console.log(this.minePointdetails)
							})
						});

					})
				})
			},

			// 隐患点位列表
			getHiddenPointPosition() {
				hiddenPointPosition().then((res) => {
					console.log("患点位列表", res)
					res.data.list.forEach((item) => {
						// create DOM element for the marker
						const el10 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el10.style.backgroundImage = "url('/static/sp4.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el10.style.width = 42 + "px"
						el10.style.height = 42 + "px"
						el10.id = 'marker';
						// create the marker
						this.marke8 = new mapboxgl.Marker(el10)
							.setLngLat([item.longitude, item.latitude])
							// sets a popup on this marker
							.addTo(this.map);
						this.marke8.getElement().addEventListener('click', (e) => {
							hiddendetails(item.id).then(res => {
								console.log(res)
								this.show3 = true
								this.hiddenPointPositiondetails = res.data

							})
						});



					})

				})
			},
			//巡查点列表
			getInspectionPoint() {
				inspectionPoint().then(res => {
					console.log(res)
					res.data.forEach((item) => {
						//create DOM element for the marker
						const el11 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el11.style.backgroundImage = "url('/static/sp4.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el11.style.width = 42 + "px"
						el11.style.height = 42 + "px"
						el11.id = 'marker';
						//create the marker
						this.marke10 = new mapboxgl.Marker()
							.setLngLat([item.longitude, item.latitude])
							// sets a popup on this marker
							.addTo(this.map);
						this.marke10.getElement().addEventListener('click', (e) => {
							inspectionPointDetails(item.id).then(res => {
								console.log(res)
								this.show6 = true
								this.inspectionPointDetails = res.data

							})
						});
					})
				})
			},





			// 监控设备点位列表
			getMonitoringEquipment() {
				monitoringEquipment().then((res) => {
					console.log("监控设备", res)
					res.data.forEach((item) => {
						//监控设备
						// create DOM element for the marker
						const el12 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el12.style.backgroundImage = "url('/static/spjk.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el12.style.width = 52 + "px"
						el12.style.height = 52 + "px"
						el12.id = 'marker';
						// create the marker
						this.marke12 = new mapboxgl.Marker(el12)
							.setLngLat([item.longitude, item.latitude])
							// .setPopup(popup7) // sets a popup on this marker
							.addTo(this.map);
						this.marke12.getElement().addEventListener('click', (e) => {
							monitoringDetails(item.id).then(res => {
								console.log(res)
								this.show5 = true
								this.monitoringDetails = res.data

							})
						});


					})

				})


			},

			// 责任区点位列表
			getAreaResponsibility() {
				areaResponsibility().then((res) => {
					var arr = []
					console.log("责任区点位列表", res)
					res.data.forEach((item) => {
						//多边形区域
						arr.push(JSON.parse(item.areaCoordinates))
						console.log(item.areaCoordinates)

					})
					this.map.on('load', () => {
						console.log(arr)
						// this.map.setCenter([109.81052390215689, 34.49296681752897])
						// this.map.setZoom(16)
						this.map.addSource('maine', {
							'type': 'geojson',
							'data': {
								'type': 'Feature',
								'geometry': {
									'type': 'Polygon',
									// These coordinates outline Maine.
									'coordinates': arr


								}
							}
						})
						//添加一个新图层可视化多边形
						this.map.addLayer({
							'id': 'maine',
							'type': 'fill', //图层类型 面图层
							// "source-layer": "water", //加载矢量切片
							'source': 'maine', // 引用数据源
							'layout': {
								// 'visiblity': 'visible' //绘制区域显示不显示 visible显示 none不显示
							},
							'paint': {
								'fill-color': '#FFFFFF', // 蓝色填充
								'fill-opacity': 0.5,

							},
							// minZoom: 1, // 当图层的的最小缩放级别
							// maxZoom: 2 // 当图层的的最大缩放级别
						})
						// 在多边形周围添加一个黑色的轮廓
						this.map.addLayer({
							'id': 'outline',
							'type': 'line',
							'source': 'maine',
							'layout': {
								// 'visiblity': 'none'
								'line-join': 'round' //线条圆角
							},
							'paint': {
								'line-color': '#eeeeee',
								'line-width': 2
							}
						})

					})

				})
			},

			// 获取当前位置的经纬度
			getRTP() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}




		}
	}
</script>
<script module="mapbox" lang="renderjs">
	import appConfig from "config";
	//import mapboxgl from "mapbox-gl"; // 引包方式二
	// import 'mapbox-gl/dist/mapbox-gl.css';
	// const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
	// import MapboxLanguage from '@mapbox/mapbox-gl-language'
	// import 'static/mapbox-gl-cgcs2000.css'
	// import mapboxgl from 'static/mapbox-gl-cgcs2000.js'
	export default {
		data() {
			return {
				// zt: "",
				map: null, //地图实例
				popup: null,
				popup2: null,
				popup6: null,
				el: null,
				marker: null,
				marker1: null,
				marker2: null,
				marke6: null,
				marke7: null,

			}
		},
		// computed: {
		// 	...mapState({
		// 		hazard_source: state => state.sjzd.sjzdList.hazard_source,
		// 		danger_level: state => state.sjzd.sjzdList.danger_level,


		// 	})
		// },
		mounted() {
			if (typeof window.mapboxgl === 'function') {
				this.$nextTick(() => {
					this.initMap(1)
				})
			} else {
				const script = document.createElement('script')
				script.src = 'http://1.85.55.225:8085/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js';
				script.onload = this.initMap.bind(this);
				document.head.appendChild(script)
			}
			this.iocnOne()

		},

		methods: {
			// 场景地图初始化
			initMap(type) {
				mapboxgl.accessToken =
					'pk.eyJ1IjoiZmxvd2Vyd2VpIiwiYSI6ImNsYXo3NnN3MDE3ZTUzcGxpNzNncGxxdWYifQ.AWmbnSDKRxSygXxsAkMF9Q';
				// 创建地图
				// 英文标注转换为中文   
				// mapboxgl.setRTLTextPlugin(
				// 	"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
				// );

				this.map = new mapboxgl.Map({
					container: 'map-box', // container ID
					// style: 'mapbox://styles/mapbox/satellite-v9', // style加载地图的样式
					style: 'http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/YXSL-225.json', // style加载地图的样式
					// style: '/static/YXSL-225.json',
					//style: 'mapbox://styles/mapbox/dark-v5',
					center: [109, 35.655], // 设置地图的中心点
					projection: 'globe', // 把地图设置为球体
					zoom: 6, // starting zoom
					pitch: 5,
					minZoom: 5,
					maxZoom: 17,
					// minZoom: 5, // 图层的最小缩放级别
					// maxZoom: 17 // 图层的最大缩放级别
				})

				// 设置语言
				// var language = new MapboxLanguage({
				// 	defaultLanguage: "zh-Hans"
				// });
				// this.map.addControl(language);
				this.map.on("load", () => {
					// 视频监控画面
					// 创建视频div
					console.log(type)
					if (type == 1) {
						this.getMinePoint()
					} else if (type == 2) {
						this.getAreaResponsibility()
					} else if (type == 3) {
						this.getInspectionPoint()
					} else if (type == 4) {
						this.show = false
						this.getHiddenPointPosition()
					} else if (type == 5) {
						this.show = false
						this.getAccidentsList();
					} else if (type == 6) {
						this.show = false
						this.getMonitoringEquipment()
					} else if (type == 7) {
						this.show = false
						this.getWatchEquipment()
					}


					// this.getHiddenPointPosition()
					// this.getInspectionPoint()
					// this.getMonitoringEquipment()
					// this.getAreaResponsibility()
					// this.getWatchEquipment()
				});
			},



		}
	}
</script>
<style lang="scss" scoped>
	.map-wrap {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;
	}

	#map-box {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;

	}

	.close {
		position: absolute;
		right: 10px;
		top: 20px;
		font-size: 18px;
		z-index: 999;
	}

	/* 矿山详情弹出框 */
	.ksorder {
		width: 100%;
		min-height: 100px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		background-color: #fff;
		padding: 10px;
	}

	/*地图定位样式*/
	.listing-group {
		font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 600;
		position: absolute;
		top: 154px;
		right: 10px;
		z-index: 1;
		border-radius: 3px;
		max-width: 12%;
		color: #fff;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 68px;
		opacity: 0.8;
		height: 300px;
		padding: 10px;
		display: inline-grid;
	}

	.listing-group input[type='checkbox']:first-child+label {
		border-radius: 3px 3px 0 0;
	}

	.listing-group label:last-child {
		border-radius: 0 0 3px 3px;
		border: none;
	}

	.listing-group input[type='checkbox'] {
		display: none;
	}

	.listing-group input[type='checkbox']+label {
		background-color: #3386c0;
		display: block;
		cursor: pointer;
		padding: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	}

	.listing-group input[type='checkbox']+label {
		background-color: #3386c0;
		text-transform: capitalize;
	}

	.listing-group input[type='checkbox']+label:hover,
	.listing-group input[type='checkbox']:checked+label {
		background-color: #4ea0da;
	}

	.listing-group input[type='checkbox']:checked+label:before {
		content: '✔';
		margin-right: 5px;
	}


	/*地图定位样式*/
	.listing-groupss {
		font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 600;
		position: absolute;
		top: 78px;
		left: 10px;
		z-index: 1;
		border-radius: 3px;
		max-width: 82%;
		color: #0e0e0e;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 6px;
		opacity: 1;
		font-size: 15px;
		/* line-height: 35px; */
		height: 70px;
		width: 414px;
		/* padding: 17px; */
		background-color: #eee;
	}

	.listing-groups {
		font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 600;
		position: absolute;
		top: 407px;
		left: 10px;
		z-index: 1;
		border-radius: 3px;
		max-width: 20%;
		color: #0e0e0e;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 6px;
		opacity: 1;
		/* line-height: 35px; */
		height: 150px;
		width: 194PX;
		/* padding: 17px; */
		background-color: #eee;
	}

	.listing-groups input[type='checkbox']:first-child+label {
		border-radius: 3px 3px 0 0;
	}

	.listing-groups label:last-child {
		border-radius: 0 0 3px 3px;
		border: none;
	}

	.listing-groups input[type='checkbox'] {
		display: none;
	}

	.listing-groups input[type='checkbox']+label {
		background-color: #3386c0;
		display: block;
		cursor: pointer;
		padding: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	}

	.listing-groups input[type='checkbox']+label {
		background-color: #3386c0;
		text-transform: capitalize;
	}

	.listing-groups input[type='checkbox']+label:hover,
	.listing-groups input[type='checkbox']:checked+label {
		background-color: #4ea0da;
	}

	.listing-groups input[type='checkbox']:checked+label:before {
		content: '✔';
		margin-right: 5px;
	}







	.lin-w {
		display: block;
		line-height: 36px;
	}

	.green {
		text-align: center;
		width: 33px;
		line-height: 24px;
	}

	uni-image>div,
	uni-image>img {
		width: 38%;
		height: 38%;
		margin-top: 94px;
		margin-left: 105px;
	}

	.fontsize-P {
		color: #919191;
	}

	.fontsize_p {
		color: #6c6c6c;

	}

	::v-deep .cu-form-group+.cu-form-group {
		border-top: 0px solid #eee;
	}

	.cu-from-group-wei {
		transition-duration: 300ms;
		transition-timing-function: ease-out;
		z-index: 900;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		padding-bottom: 0PX;
	}

	.styone {
		background-image: linear-gradient(to right, rgb(83, 146, 185), rgb(107, 183, 207));
		color: #EEE;
		line-height: 30px;
		padding: 15px;
		font-size: 16px;
		width: 100%;
	}

	.yhyone {
		background-image: linear-gradient(to right, #D36554, #E37757);
		color: #EEE;
		line-height: 30px;
		padding: 15px;
		font-size: 16px;
		width: 100%;
	}

	.u-image-error {
		width: 108px;
		height: 56px;
		position: absolute;
		right: 32px;
		/* background-color: #123; */
		/* background: linear-gradient(to right, #2A62A5, #5192DF); */
		// border: 1px solid #004CA7;
		border-right: none;
		border-radius: 20px 0px 0px 20px;
		margin-top: -114px;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 5px;
		color: #343434;
		font-size: 14px;
		line-height: 22px;
	}

	::v-deep .mapboxgl-popup-content {
		color: #000;
		background-color: #fff;
		border-color: #fff;
		padding: 10px 10px 10px;
		max-width: 320px;
		box-shadow: 0px 0px 0px #fff;
		font-family: 'Oswald';
		width: 800rpx;

	}
</style>
